<template>
  <div class="searchgroup">
    <dl>
      <dd>
        <van-icon name="fire" />西安热搜
      </dd>
      <dt v-for="(v,i) in arr1 " :key="'西安热搜'+i">
        <div class="left">
          <span class="id" :id="'西安'+i" v-orange>{{v.id}}</span>
          <p class="text">{{v.text}}</p>
        </div>
        <p class="num">
          {{v.num}}
          <span class="up">↑</span>
        </p>
      </dt>
    </dl>
    <dl>
      <dd>
        <van-icon name="bell" />美食推荐
      </dd>
      <dt v-for="(v,i) in arr2 " :key="'美食推荐'+i">
        <div class="left">
          <span class="id" :id="'美食'+i" v-orange>{{v.id}}</span>
          <p class="text">{{v.text}}</p>
        </div>
        <p class="num">
          {{v.num}}
          <span class="up">↑</span>
        </p>
      </dt>
    </dl>
    <dl>
      <dd>
        <van-icon name="comment-circle" />精选内容
      </dd>
      <dt v-for="(v,i) in arr3 " :key="'精选内容'+i">
        <div class="left">
          <span class="id" :id="'精选'+i" v-orange>{{v.id}}</span>
          <p class="text">{{v.text}}</p>
        </div>
        <p class="num">
          {{v.num}}
          <span class="up">↑</span>
        </p>
      </dt>
    </dl>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // arr1:[],
      // arr2:[],
      // arr3:[]
      arr1: [
        {
          id: "↑",
          text: "发现吃蟹好去处",
          num: ""
        },
        {
          id: 1,
          text: "上海宴",
          num: 87695
        },
        {
          id: 2,
          text: "赛格购物中心美食",
          num: 86629
        },
        {
          id: 3,
          text: "靓靓蒸虾",
          num: 82664
        },
        {
          id: 4,
          text: "太白山唐镇鹿野仙踪",
          num: 79562
        },
        {
          id: 5,
          text: "苏梅里泰式茶餐厅",
          num: 76075
        },
        {
          id: 6,
          text: "卤校长火锅",
          num: 75508
        },
        {
          id: 7,
          text: "幸福老火锅",
          num: 74313
        },
        {
          id: 8,
          text: "幼兽酒吧",
          num: 72045
        },
        {
          id: 9,
          text: "西安到汉中自驾游攻略",
          num: 67296
        }
      ],
      arr2: [
        {
          id: 1,
          text: "藏拙町内烧肉酒场",
          num: 87695
        },
        {
          id: 2,
          text: "悦豪云顶自助餐厅",
          num: 84229
        },
        {
          id: 3,
          text: "石头烧.石板烤肉",
          num: 81164
        },
        {
          id: 4,
          text: "蜜港甜品工作室",
          num: 78962
        },
        {
          id: 5,
          text: "云裳花栖",
          num: 76575
        },
        {
          id: 6,
          text: "悠享小院",
          num: 73158
        },
        {
          id: 7,
          text: "庄氏小厨Spicy room",
          num: 71163
        },
        {
          id: 8,
          text: "林间山庄",
          num: 69745
        },
        {
          id: 9,
          text: "粉巷13號陕菜馆.陕西人...",
          num: 67646
        },
        {
          id: 10,
          text: "雁先生",
          num: 65258
        }
      ],
      arr3: [
        {
          id: 1,
          text: "西安适合晚上玩的景点",
          num: 86044
        },
        {
          id: 2,
          text: "西安周边自驾游",
          num: 83713
        },
        {
          id: 3,
          text: "桂花酒酿蛋糕",
          num: 82752
        },
        {
          id: 4,
          text: "适合情侣玩的地方",
          num: 78966
        },
        {
          id: 5,
          text: "中华郡远古部落客栈",
          num: 78117
        },
        {
          id: 6,
          text: "周末带娃好去处",
          num: 74265
        },
        {
          id: 7,
          text: "西安大型室内游乐场",
          num: 71206
        },
        {
          id: 8,
          text: "108丛林咖啡",
          num: 68234
        },
        {
          id: 9,
          text: "汉阳陵银杏林",
          num: 67154
        },
        {
          id: 10,
          text: "马嵬驿民俗文化村",
          num: 63845
        }
      ]
    };
  },
  // created() {
  //   axios.request("http://localhost:8889/cyxianhotseach").then(({ data }) => {
  //     // console.log(data);
  //     this.arr1 = data;
  //   });
  //   axios
  //     .request("http://localhost:8889/cymeishihotsearch")
  //     .then(({ data }) => {
  //       // console.log(data);
  //       this.arr2 = data;
  //     });
  //   axios
  //     .request("http://localhost:8889/cyjingxuanhotsearch")
  //     .then(({ data }) => {
  //       // console.log(data);
  //       this.arr3 = data;
  //     });
  // },
  //   排名前三,橙色
  directives: {
    orange: {
      inserted(el) {
        if (
          el.id == "西安0" ||
          el.id == "西安1" ||
          el.id == "西安2" ||
          el.id == "美食0" ||
          el.id == "美食1" ||
          el.id == "美食2" ||
          el.id == "精选0" ||
          el.id == "精选1" ||
          el.id == "精选2"
        ) {
          el.style.color = "#f17829";
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.searchgroup {
  height: 106.667vw;
  margin-bottom: 1.333vw;
  width: 255 * 0.8vw;
  display: flex;

  dl {
    width: 61.333vw;
    padding: 0 3.2vw;
    margin-right: 2.667vw;
    border: 0.533vw solid #fbfaf8;
    border-radius: 2.133vw;
    box-shadow: 0.267vw 0.267vw 0.267vw 0.267vw rgb(238, 235, 235);
    // box-sizing: border-box;
    background: repeating-linear-gradient(#fef2ef, #fff 10%, #fff 100%);
    dd {
      width: 100%;
      height: 11.467vw;
      line-height: 11.467vw;
      font-size: 3.733vw;
      font-weight: bolder;
      ::v-deep .van-icon {
        font-size: 4.8vw;
        color: #f17829;
        padding-right: 2.667vw;
      }
    }
    dt {
      width: 100%;
      height: 9.333vw;
      font-size: 3.2vw;
      line-height: 9.333vw;
      box-sizing: border-box;
      border-top: 0.267vw solid rgb(247, 243, 243);
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .id {
          padding-right: 2.667vw;
          font-weight: bolder;
          font-size: 3.733vw;
          color: #a7a4a4;
        }
      }
      .num {
        color: #a7a4a4;
        .up {
          color: #f17829;
          font-weight: bolder;
          font-size: 3.733vw;
        }
      }
    }
  }
}
</style>